<template>
  <div class="">
    <h3>table3--</h3>

    <el-select v-model="currSelectOption" :placeholder="`${currSelectOption}`">
      <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      </el-option>
    </el-select>
    <br>
    <span>{{ selectOptions }}</span>
    <br>
    <span>{{ currSelectOption }}</span>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'table3',
  data() { 
    return {

    }
  },
  computed: {
    ...mapGetters([
      'selectOptions',
      // 'currSelectOption'
    ]),
    currSelectOption: {
      get() {
        return this.$store.state.currSelectOption
      },
      set(val) {
        this.$store.state.currSelectOption = val
      }
    }

  },
  mounted() {
    this.getSetSelectOption()
    // console.log(this.selectOptions, this.currSelectOption)
  },
  methods: {
    ...mapActions([
      'getSetSelectOption',
    ]),
    ...mapMutations([
      'setCurrSelectOption'
    ]),
    // selectChangeHandle(e) {
    //   console.log('change data', e)
    //   this.setCurrSelectOption(e)
    // }
  }
 }
</script>

<style lang="" scoped>
</style>